<template>
  <div class="AppTabs">
    <el-tabs
      v-model="activePath1"
      type="card"      
      @tab-remove="removeTab"
      @tab-click="onClickTab"
      class="AppTabes__eltab"
    >
      <!-- 快速按钮 -->
      <el-tab-pane 
        key="default"
        :closable="false"
      >
        <template #label>
          <i class="el-icon-takeaway-box"></i>
        </template>

      </el-tab-pane>

      <el-tab-pane
        v-for="item in tabsInfo"
        closable
        :key="item.path"
        :label="item.title"
        :name="item.path"
        :path="item.path"
        :query="item.query"
      ></el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useStore,mapGetters } from 'vuex'



export default defineComponent({
  name: 'AppTabs',
  components: {
  },
  data(){
    return {
      tabsInfo1: [],
      activePath1 : ""
    }
  },

  methods:{
    removeTab(targetName: string) {
      
      console.log("this.tabsInfo.length",this.tabsInfo.length);


      //还剩下一个tab时删除默认跳到首页
      if (this.tabsInfo.length <= 1) {
        if (targetName == "/dashboard") {
          return;
        }

        let routeData =  {
            path: "/dashboard",
            query: {},
            title: "首页",
        }

        this.DelTabsInfo(routeData);

        console.log("go dashboard")
        this.$router.push({
          path: "/dashboard",
        });
        return;
      }
      // targetName: 删除的item标识，这里值是path路径
      let tabs = this.tabsInfo; //tabs数组
      let activeName = this.activePath; //当前选中的path

      //删除的项是当前选中的
      if (activeName === targetName) {
        tabs.forEach((tab: { path: string }, index: number) => {
          if (tab.path === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              this.PathChange(nextTab.path);              
              this.deljumpPage(nextTab.path, nextTab.query);
            }
          }
        });
      }

      this.DelTabsInfo(tabs.filter((tab: { path: string }) => tab.path !== targetName));
    },

      //删除选中项重新选择跳转
    deljumpPage(path: string, query: any) {
      this.$router.push({
        path: path,
        query: query,
      });
    },

    onClickTab(tab: any,event:any){
      // this.activePath1 = tab.$attrs.path;
      console.log("onClickTab tab",tab.index,tab)
      console.log("tabsInfo",this.tabsInfo)

      if(tab.index == 0){
        // 点击了default
        console.log("点击了default")

        return;
      }


      let tabIndex = tab.index - 1;
      let val = this.tabsInfo[tabIndex]
      console.log("onClickTab val index",val,tabIndex)


      let path = val.path;
      let query = val.query;

      // console.log("tab props",tab.props.label)
      console.log("tab query",query)
      console.log("tab path",path)
      // console.log("tab props",tab.props)

      this.$router.push({
        path: path,
        query: query,
      });
    }
  },

  watch :{
    '$route':function(){
      console.log("on route changed",this.$route.path)

      this.activePath1 = this.$route.path;
    }
  },

  computed:{
    ...mapGetters({
      tabsInfo: 'managercore/tabs/tabsInfo',
      activePath: 'managercore/tabs/activePath',
    }),
    systemInfo(){
      return "version 1"
    }
  },

  mounted(){
    // console.log("tabsInfo",this.tabsInfo)
      this.activePath1 = this.$route.path;
    // console.log("on mounted MainPage 11")
  },

  setup(){
    const store = useStore()

    return{
      DelTabsInfo: (routeData:any) => store.commit('managercore/tabs/DelTabsInfo',routeData),
      PathChange: (routeData:any) => store.commit('managercore/tabs/PathChange',routeData)
    }
  }
})
</script>

<style scoped lang="scss">

</style>
